<template>
  <div class="app-container">
    <div class="container">
      <!--工具栏-->
      <div>
        <!-- 搜索 -->
        <el-form ref="query" :inline="true" :model="query" size="small" class="demo-form-inline">
          <el-form-item label="用户编号：" prop="name">
            <el-input v-model="query.user_id" clearable placeholder="输入用户编号" style="width: 180px;" class="filter-item" @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item label="用户姓名：" prop="name">
            <el-input v-model="query.user_name" clearable placeholder="输入用户姓名" style="width: 180px;" class="filter-item" @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item label="手机号：" prop="phone">
            <el-input v-model="query.phone" clearable placeholder="输入手机号" style="width: 180px;" class="filter-item" @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item label="申请时间">
            <el-date-picker
              v-model="queryOrderDate"
              :picker-options="pickerOptions"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item label="处理状态" prop="name">
            <el-select v-model="query.status" clearable placeholder="处理状态" class="filter-item" style="width: 180px" >
              <el-option v-for="item in processstatus" :key="item.key" :label="item.value" :value="item.key"/>
            </el-select>
          </el-form-item>
          <el-form-item >
            <el-button size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
            <el-button size="mini" icon="el-icon-refresh" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="operate-container">
          <el-button :disabled="!(receipt_nos.length > 0)" class="filter-item" size="small" type="primary" icon="el-icon-s-check" @click="batchauditRecepit()">批量审核</el-button>
          <el-button class="filter-item" size="small" type="primary" icon="el-icon-upload2" @click="exportExcel">导出EXCEL</el-button>
        </div>
      </div>
      <viewImg ref="viewImg" />
      <rebutForm ref="rebutForm" />
      <!--表格渲染-->
      <el-table
        ref="table"
        :data="data"
        size="small"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection"/>
        <el-table-column prop="user_id" label="用户编号" align="center"/>
        <el-table-column prop="unionid" label="微信号" align="center"/>
        <el-table-column prop="nickname" label="昵称" align="center"/>
        <el-table-column prop="user_name" label="姓名" align="center"/>
        <el-table-column prop="phone" label="手机号" align="center"/>
        <el-table-column prop="member_type" label="等级角色" align="center">
          <template slot-scope="scope">
            {{ getRoleName(scope.row.member_type) }}
          </template>
        </el-table-column>
        <el-table-column prop="amount_total" label="可提现金额" align="center"/>
        <el-table-column prop="advance_pay" label="提现金额" align="center"/>
        <el-table-column prop="payment" label="提现类型" align="center">
          <template slot-scope="scope">
            {{ getExtractName(scope.row.payment) }}
          </template>
        </el-table-column>
        <el-table-column prop="card_number" label="账号信息" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.payment === 0 && scope.row.account_information ">{{ scope.row.account_information }}</span>
            <span v-else-if="scope.row.payment === 1 && scope.row.account_information "><a @click="showMsg(scope.row.account_information)">查看</a></span>
            <span v-else-if="scope.row.payment === 2 && scope.row.account_information "><a @click="showMsg(scope.row.account_information)">查看</a></span>
          </template>
        </el-table-column>
        <el-table-column prop="payment" label="用户状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.user_state === 0">正常</span>
            <span v-else>冻结</span>
          </template>
        </el-table-column>
        <el-table-column prop="apply_date" label="创建时间" width="140" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(Number(scope.row.apply_date)) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deal_state" label="处理状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0">未处理</span>
            <span v-if="scope.row.status === 1">已驳回</span>
            <span v-if="scope.row.status === 2">待打款</span>
            <span v-if="scope.row.status === 3">已打款</span>
          </template>
        </el-table-column>
        <el-table-column prop="card_number" label="操作" align="center" width="180px">
          <template slot-scope="scope">
            <div v-if="scope.row.status === 0">
              <el-button size="mini" type="success" icon="el-icon-check" @click="auditRecepit(scope.row.receipt_no)">通过</el-button>
              <el-button size="mini" type="danger" icon="el-icon-close" @click="rebutRecepit(scope.row.receipt_no)">驳回</el-button>
            </div>
            <span v-else>审核完成</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="page + 1"
        background
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange" />
    </div>
  </div>
</template>

<script>
import treeTable from '@/components/TreeTable'
import initData from '@/mixins/initData'
import { parseTime } from '@/utils/index'
import COMMEN from '@/utils/commen'
import { getRoleName, getExtractName } from '@/utils/commen'
import { updateDealStateById } from '@/api/mall/cashManage'
import rebutForm from './rebutForm'
import viewImg from '../viewImg'
export default {
  components: { treeTable, viewImg, rebutForm },
  mixins: [initData],
  data() {
    return {
      pickerOptions: COMMEN.PICKEROPTIONS,
      extracttype: COMMEN.TYPE_SELSECT_EXTRACT,
      processstatus: COMMEN.STATUS_SELSECT_PROCESS,
      rolestypes: COMMEN.TYPE_SELECT_ROLE,
      delLoading: false,
      expand: true,
      receipt_nos: [],
      queryOrderDate: ['', '']
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseTime, getRoleName, getExtractName,
    // 页面列表初始化
    beforeInit() {
      this.url = 'api/receipt'
      this.params = { page: this.page + 1, size: this.size, flag: 0 }
      const query = this.query
      let apply_date = '' // 保存时间
      // 用户编号
      if (query.user_id) { this.params['user_id'] = query.user_id }
      // 用户姓名
      if (query.user_name) { this.params['user_name'] = query.user_name }
      // 申请时间
      if (this.queryOrderDate[0] !== '' && this.queryOrderDate[0] !== null) {
        apply_date = this.queryOrderDate.map(function(item) {
          return parseTime(item, true)
        }).join('~')
      }
      if (apply_date) { this.params['apply_date'] = apply_date }
      // 处理状态
      if (query.status !== '' && query.status !== null) { this.params['status'] = query.status }
      // 提现状态
      if (query.payment !== '' && query.payment !== null) { this.params['payment'] = query.payment }
      // 等级角色
      if (query.member_type !== '' && query.member_type !== null) { this.params['member_type'] = query.member_type }
      return true
    },
    // 获取商品的选中checkbox
    handleSelectionChange(rows) {
      this.receipt_nos = []
      if (rows) {
        rows.forEach(row => {
          if (row) {
            this.receipt_nos.push(row.receipt_no)
          }
        })
      }
    },
    // 导出Excel
    exportExcel() {
      const tableData = this.$refs.table.tableData
      const dataList = []
      for (let i = 0; i < tableData.length; i++) {
        dataList.push(tableData[i])
      }
      const data = this.formatJson(dataList)
      import('@/utils/export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: ['用户编号', '微信号', '昵称', '姓名', '手机号', '等级角色', '可提现金额', '提现金额', '提现类型', '创建时间', '处理状态'],
          data,
          filename: '导出审核列表'
        })
      })
    },
    formatJson(jsonData) {
      // 导出订单列表的数据转换
      return jsonData.map(v => {
        const member_type = getRoleName(v.member_type)
        const payment = getExtractName(v.payment)
        var status = ''
        switch (v.status) {
          case 0:
            status = '未处理'
            break
          case 1:
            status = '已驳回'
            break
          case 2:
            status = '待打款'
            break
        }
        const date = parseTime(Number(v.apply_date))
        const value = [v.user_id, v.unionid, v.nickname, v.user_name, v.phone, member_type, v.amount_total, v.advance_pay, payment, date, status]
        return value
      })
    },
    // 页面重置
    resetForm() {
      this.query = {
        user_id: '',
        user_name: '',
        status: '',
        payment: '',
        member_type: ''
      }
      this.queryOrderDate = ['', '']
      this.init()
    },
    showMsg(url) {
      // 图片放大预览
      this.$refs.viewImg.dialog = true
      this.$refs.viewImg.url = url
    },
    // 提现驳回
    rebutRecepit(id) {
      this.$refs.rebutForm.form.receipt_no = [id]
      this.$refs.rebutForm.dialog1 = true
    },
    batchauditRecepit() {
      this.$confirm('请选择批量通过/驳回?', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '通过',
        cancelButtonText: '驳回',
        type: 'warning',
        center: true
      }).then(() => {
        // 批量通过
        this.auditRecepit()
      }).catch(() => {
        // 批量驳回
        this.$refs.rebutForm.form.receipt_no = this.receipt_nos
        this.$refs.rebutForm.dialog1 = true
      })
    },
    auditRecepit(id) {
      this.$confirm('是否确定审核当前余额提现?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var receipt_nos = this.receipt_nos
        if (id) {
          receipt_nos = [id]
        }
        const datas = {
          receipt_no: receipt_nos,
          flag: 0
        }
        updateDealStateById(datas).then((res) => {
          if (res) {
            this.$notify({
              title: '审核成功',
              type: 'success',
              duration: 2500
            })
            this.init()
          } else {
            this.$notify({
              title: '审核失败',
              type: 'success',
              duration: 2500
            })
          }
        }).catch(() => {
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消审核'
        })
      })
    }
  }
}
</script>

<style>
   .el-table thead{
     color: #303133;
   }
</style>
